<template>
  <div>
    
    <el-table :data="tableData" border style="width: 100%">
     
      <el-table-column prop="name" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
       <el-table-column prop="createTime" label="发起时间">
          <template slot-scope="scope">{{timeFun(scope.row.createTime)}}</template>
        </el-table-column> 
      <el-table-column prop="orderId" label="单号" > </el-table-column>
      <el-table-column prop="mobile" label="用户手机" > </el-table-column>
      <el-table-column prop="amount" label="支付金额" width="80"> </el-table-column>
      <el-table-column prop="product.type" label="类别" > </el-table-column>
      <el-table-column prop="product.title" label="商品名" > </el-table-column>
      <el-table-column prop="hospital.name" label="商家" > </el-table-column>
      <el-table-column prop="" label="方式" >
         <template slot-scope="scope">
            <span v-if="scope.row.channel == 'alipay'">支付宝</span>
            <span v-if="scope.row.channel == 'wxpay'">微信</span>
            <span v-if="scope.row.channel == 'huabei'">花呗</span>
          </template>
      </el-table-column>
      <el-table-column prop="refundReason" label="退款原因" > </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.status == 0"> 未付款</span>
            <span v-else-if="scope.row.status == 1 " class="green"> 付款成功</span>
            <span v-else-if="scope.row.status == 2" class="red">付款失败</span>
            <span v-else-if="scope.row.status == 3" >待审核</span>
            <span v-else-if="scope.row.status == 4"  class="green">退款成功</span>
            <span v-else-if="scope.row.status == 5"  class="red">退款失败</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.status == 3" type="success" class="addBtn" @click="passFun(scope.row.id,4)">通过</el-button>
            <el-button v-if="scope.row.status ==3" class="addBtn" type="danger"  @click="passFun(scope.row.id,5)"> 不通过</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
     <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import getTime from '@/Http/getTime'
  import Http from '@/Http/Http'

  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        imgstuts:false,
        titleImgurl:'',
        currentPage4: 1,//分野
        page:1,
        pageSize:10,
        total:0,
        tableData:[],
      }
    },
    created() {
      this.getlist()
    },
    props:['navStatus'],
    methods: {
      getlist() {
        
        const obj = {
          "pageIndex":this.page,
          "pageSize":this.pageSize
        }
        if( this.navStatus == 0 ){
          obj.status = 3
        } else if (this.navStatus == 1){
          obj.status = 4
        } else if (this.navStatus == 2){
          obj.status = 5
        } 

        Http.getRefundList(obj)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
           this.dataArtice = '';
          this.articelStatus = false
        })
        .catch( error => {
          this.$message.error(`请求失败`)
          setTimeout(()=>{
            this.$router.push('/')
          },2000)
        })
      },
      timeFun(val) {
        return getTime(val)
      },
      srcFun(obj){
        if(obj.indexOf('http://') > -1){
          return obj
        } else{
          obj = 'http://odqiuyfsp.bkt.clouddn.com/'+obj
        }
        return obj
      },
        //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        
      },
     
      //审核
      passFun(id,status) {
        let txt;
        status ==4 ? txt = '通过' : txt = '驳回';
        this.$confirm(`确认 ${txt} 这一个退款吗？`)
        .then(_ => {
          const param = {
            status:status,
            id:id
          };
          Http.upRefundStatus(param)
          .then( res => {
            if( res.data.code == 200 ){
              this.$message.success(`${txt} 成功`)
              this.getlist()
            } else if(res.data.code == -1003) {
              this.$message.error(`请求失败原因：${res.data.message}`)
            }
          })
          .catch( res => {
            this.$message.error('服务器请求失败')
          })
        })
        .catch(a => {
        });
      }
    }
  }
</script>